<template>
	<view class="register">
		<!-- 	<view class="" style="padding-top: 20px;">
			<view class="" style="margin-bottom: 10px;">
				<view class="titlecont" style="margin-top: 30px;display: flex;flex-direction: row;align-items: center;">
					<image src="../../static/dbgoback.png" mode="widthFix" style="width: 30px;height: 30px;position: absolute;left: 10px;"
					 @click="test"></image>
					<view class="" style="font-size: 16px;margin-left: 45%;text-align: center;">
						注册
					</view>
				</view>
			</view>
		
		</view> -->
		<view class="register_user">
			<input type="text" placeholder="用户ID（字母为小写和数字)" placeholder-style="color:#b1b1b1;font-size:16px;" v-model="username" @input="vinInput" :value="username" />
		</view>
		<view class="register_pwd">
			<input type="text" placeholder="昵称" placeholder-style="color:#b1b1b1;font-size:16px;" v-model="nickname" />
		</view>
		<view class="register_pwd">
			<input type="text" placeholder="手机号" v-model="phone" placeholder-style="color:#b1b1b1;font-size:16px;" />
		</view>
		<view class="register_pwd" style="position: relative;">
			<input type="text" placeholder="验证码" placeholder-style="color:#b1b1b1;font-size:16px;" v-model="captcha" />
			<button id="button" :disabled="disbtn" style="position: absolute; top:35%; right: 13%;font-size: 14px;z-index: 99;"
			 @click="countTime(60)" hover-class="none">{{text}}</button>
			<!-- <view  ></view> -->
		</view>

		<view class="register_pwd">
			<input type="text" password placeholder="用户密码" hover-class="input-hover" placeholder-style="color:#b1b1b1;font-size:16px;"
			 v-model="password" />
		</view>
		<view class="register_pwd">
			<input type="text" password placeholder="确认密码" hover-class="input-hover" placeholder-style="color:#b1b1b1;font-size:16px;"
			 v-model="tpassword" />
		</view>
		<!-- <view class="register_btn">
			<button hover-class="btn_hover" @tap="register">注册</button>
		</view> -->
		<view class="btn" @tap="register">
			<text>注册</text>
		</view>
		<!-- 	<view class="register_back">
			<navigator url="../login/login" open-type="redirect" hover-class="navigator-hover">返回登录</navigator>
		</view> -->
	</view>
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	export default {
		data() {
			return {
				countdown: 60,
				btnDisabled: false,
				text: '获取验证码',
				username: "",
				password: "",
				tpassword: "",
				captcha: '',
				phone: '',
				disbtn: false,
				nickname: '',
			}
		},
		onLoad() {
			console.log('onLoad');
		},
		methods: {
			vinInput(e) {
			    let val = e.detail.value;
			    if (!/^[a-z\d]+$/.test(val)) {// 大写转为小写
			     val = val.toLowerCase();
			    }
			    this.username = val; //这里对应的是value绑定的变量
			    return val; // 最后输出值，要保证输入框的值和value绑定的值一致
			},
			
			// 获取验证码

			countTime(second) {
				this.disabled = true
				console.log("获取验证码")
				let intervalTimer = setInterval(() => {
					second -= 1;
					if (second >= 0) {
						// Vue中的写法
						this.text = second + "s后重新获取";
						this.btnDisabled = true;
					} else {
						clearInterval(intervalTimer);
						// Vue中的写法
						this.disabled = false
						this.text = "获取验证码";
						this.codeBtnDisabled = false;
					}

				}, 1000);
				uni.request({
					url: this.G_base + '/api/register/verify',
					data: {
						type: "register",
						phone: this.phone
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res)
						if (res.data.status = 200) {
							uni.showToast({
								title: res.data.msg,
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								image: "../../static/jinggao.png"
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});

			},
			register() {
				console.log(this.password, this.phone, this.username, this.captcha)
				// 账号注册
				// 注册登陆
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						title: "手机号格式错误",
						duration: 1000,
						image: "../../static/jinggao.png"
					})
					return
				} else if (this.password != this.tpassword) {
					uni.showToast({
						title: "两次密码不一致",
						duration: 1000,
						image: "../../static/jinggao.png"
					})
					return
				} else if (this.nickname == null) {
					uni.showToast({
						title: "请输入用用户昵称",
						duration: 1000,
						image: "../../static/jinggao.png"
					})
					return
				} else {
					uni.request({
						url: this.G_base + '/api/register',
						data: {
							account: this.username,
							captcha: this.captcha,
							password: this.password,
							phone: this.phone,
							spread: this.nickname
						},
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							console.log("APP注册成功")
							console.log(res);
							if (res.data.status == 200) {
								uni.showToast({
									title: "注册成功"
								})
								// 环信账号注册
								console.log("注册")
								const that = this;
								if (that.username == "") {
									this.$helper.toast('none', '请输入用户名！', 2000, false, 'bottom');
									return;
								} else if (that.password == "") {
									this.$helper.toast('none', '请输入密码！', 2000, false, 'bottom');
									return;
								} else
								if (that.username == "") {
									return uni.showToast({
										title: "请输入用户名！",
										icon: 'none'
									});
								} else if (that.password == "") {
									return uni.showToast({
										title: "请输入密码！",
										icon: 'none'
									});
								} else {
									var options = {
										apiUrl: WebIM.config.apiURL,
										username: that.username,
										password: that.password,
										nickname: "",
										appKey: WebIM.config.appkey,
										success: function(res) {
											console.log('res', res);
											uni.showToast({
												title: "注册成功"
											});
											var data = {
												apiUrl: WebIM.config.apiURL,
												user: that.username,
												pwd: that.password,
												grant_type: "password",
												appKey: WebIM.config.appkey
											};
											uni.setStorage({
												key: "myUsername",
												data: that.username
											});
										},
										error: function(res) {
											console.log('res', res);

											if (res.statusCode !== "200") {
												if (res.statusCode == '400' && res.data.error == 'illegal_argument') {
													return uni.showToast({
														title: "用户名非法",
														icon: 'none'
													});
												}

												uni.showToast({
													title: "用户名已被占用",
													icon: 'none'
												});
											}
										}
									};
									WebIM.conn.registerUser(options);
								}
								setTimeout(function() {
									uni.redirectTo({
										url: '../login/login',
									})
								}, 1000)
							} else {
								uni.showToast({
									title: res.data.msg,
									image: "../../static/jinggao.png"
								})
							}

						},
						fail: (err) => {
							console.log(err)
						}
					})

				}
			}
		},
	}
</script>

<style>
	@import "./register.css";

	.btn {
		margin-top: 50rpx;
		background: -webkit-linear-gradient(left, #a00000, #e10004, #a00000);
		left: 107px;
		top: 578px;
		width: 180px;
		height: 50px;
		line-height: 20px;
		border-radius: 40px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50%;
		transform: translateX(-50%);

	}

	button::after {
		border: none;
	}

	.btn text {
		color: #FFFFFF;
		left: 189px;
		top: 593px;
		width: 40px;
		height: 20px;
		font-size: 20px;
		text-align: center;
		font-family: PingFangSC-regular;
	}
</style>
